<template>
  <div>
        <section class="menu-block">
            <h2>设置顶栏背景色</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { head } from 'fzHybrid'
...
head.setBackgroundColor(this.color)
                    </code>
                </pre>
                <van-cell-group>
                    <van-field v-model="color" label="颜色值" placeholder="请输入hex颜色值" />
                </van-cell-group>
                <van-button size="large" type="primary" @click="setBackgroundColorClick">点击更改背景色</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>设置顶栏标题</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { head } from 'fzHybrid'
...
head.setTitle(this.title)
                    </code>
                </pre>
                <van-cell-group>
                    <van-field v-model="title" label="title" placeholder="请输入title" />
                </van-cell-group>
                <van-button size="large" type="primary" @click="setTitleClick">点击更改顶栏title</van-button>
            </div>
        </section>
        <section class="menu-block">
            <h2>设置设置状态栏颜色</h2>
            <div class="menu-block">
                <pre v-highlightA>
                    <code>
import { head } from 'fzHybrid'
...
head.statusBarDark()        //状态栏文字为白色
head.statusBarLight()       //状态栏文字为黑色
                    </code>
                </pre>
                <van-button size="large" type="primary" @click="setStatusBarColorClick">点击更改状态栏颜色</van-button>
            </div>
        </section>

  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify} from 'vant'
import {head} from 'MTHybrid'

export default {
    data () {
        return {
            color: '#000000',
            title: '',
            setBackgroundColorCode: '',
            light: true
        }
    },
    methods: {
        setBackgroundColorClick () {
            head.setBackgroundColor(this.color)
        },
        setTitleClick () {
            head.setTitle(this.title)
        },
        setStatusBarColorClick () {
            if (this.light) {
                head.statusBarDark()
                this.light = false
            } else {
                this.light = true
                head.statusBarLight()
            }
        }
    },
    components: {
        [Button.name]: Button,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Notify.name]: Notify
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
